<template>
	<div style="margin-top: 0.9rem">
	<div class="loadmore-container" ref="myTopicWrapper">
    <div class="loadmore-ul">
		<div class="shuoshuo-new" v-if="istopicempty==true">
			<span class="yl-2kong nosvg">
				<span class="path1">
					<span class="path2">
						<span class="path3">
							<span class="path4">
								<span class="path5">
									<span class="path6">
										<span class="path7">
											<span class="path8">
												<span class="path9"></span>
											</span>
										</span>
									</span>
								</span>
							</span>
						</span>
					</span>
				</span>
			 </span>
        	<span class="no-text">啊哦，这里空空的，让人感觉怪怪的，赶紧来填上一笔吧！</span>
		</div>
      <div v-for="(items,index) in list" :key="index">
        <div  @click="godetail(items.topicId)">
					<searchresulttopic :topicimg="items.topicPicture" :abbreviations="items.abbreviations" :followNumber="items.followNumber"
                    :title="items.title" :topictype="items.isShow"></searchresulttopic>
        </div>
      </div>
	</div>
	</div>
    </div>
</template>
<script>
import { Indicator} from 'mint-ui';
import searchresulttopic from "src/components/seachresult/searchresulttopic.vue";
import commentbody from 'src/components/comment-detail-body.vue';
import thubmUp from 'src/components/thumb-up.vue';
import api from 'src/api/index';
export default{
	data () {
		return {
			list:[],
			totalPage:'',
			istopicempty:false,
			selected: '1',
			page:1,
			msg : "我参与的话题",
			is_r:false,
		}
	},
	mounted () {
		Indicator.open("加载中...");
		this.initMyInteraction().then( data =>{
			return this.initScroll() ;
		})
		.then(data => {
			this.$nextTick(() => {
				if (!!this.myscroll) this.myscroll.refresh();
			});
			let loadmore = document.getElementsByClassName("loadmore-ul");
			if ("myTopic2detail" == localStorage.turnCount) {
				if (loadmore.length > 0) {
					setTimeout(() => {
						loadmore[0].style.transform = localStorage.getItem("turnBackMyTopic");
					}, 0);
				}
				localStorage.turnCount = "";
			} 
		}) ;
	},
	components: {
		searchresulttopic, commentbody , thubmUp
	},
	methods : {
	 initMyInteraction () {
		let p = new Promise((resolve, reject) => {
			if ("myTopic2detail" == localStorage.turnCount) {
				let mytopicObj = JSON.parse(localStorage.myTopicStorage);
				this.list = mytopicObj.list;
				this.page = mytopicObj.page;
				this.totalPage = mytopicObj.totalPage;
				if(this.page<this.totalPage){
					this.is_r=false;
				}
				resolve(true);
			}else{
				const data={type: 1,page:this.page,limit:10}
				api.QueryMyInteraction(data).then(res=>{
					if(res.success){
						this.totalPage = res.data.totalPage
						this.list = this.is_r
							? [...this.list, ...res.data.list]
							: res.data.list;
						if(this.page<res.data.totalPage){
							this.is_r=false;
						}
						if(this.list.length==0){
							this.istopicempty=true
						}else{
							this.istopicempty=false
						}
						if(this.myscroll){
							this.$nextTick(() => {
								this.myscroll.refresh();
							});
						} 
						let mytopicObj = JSON.stringify({
							list:this.list,
							page: this.page,
							totalPage: this.totalPage,
						});
						localStorage.myTopicStorage = mytopicObj;
					}
					resolve("获取我参与的话题...") ;
				})
			}
		}) ;
			return p ;
	 },
		//初始化scroll
	initScroll () {
		let p = new Promise((resolve, reject) => {
			this.$nextTick( () => {
					let myTopicWrapper = this.$refs.myTopicWrapper ;
					this.setScroll(myTopicWrapper , this) ;
				}) ;
				resolve("初始化scroll结束...") ;
		}) ;
		return p ;
	},
	setScroll (myTopicWrapper , _this) {
		_this.myscroll = new iScroll(myTopicWrapper,{
			//上拉时触发
			onScrollMove: function(){
				if((this.y <= ( this.wrapperH - this.scroller.clientHeight -50)) && _this.is_r == false){
					//加载数据
					_this.is_r = true;
					if(_this.page<_this.totalPage){
						_this.page++;
						_this.initMyInteraction();  
					}
				}
			},
		});
		Indicator.close();
	},
	godetail(data){
		localStorage.turnCount = "myTopic2detail";
		this.$util.getTransformState("turnBackMyTopic");
		this.$router.push({path:'/topicdetail',query:{topicId:data}})
	},

 },
}
</script>
<style scoped>
	.loadmore-container{
	    height:95vh;
	    overflow:hidden;
		margin:0 auto;
		background: #f5f5f5
	}
	.loadmore-ul{
	    padding-bottom:1.2rem;
	    list-style:none;
	}
</style>
